<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        .container {
            width: 700px;
            height: 380px;
            border: 1px solid black;
            border-radius: 1%;
        }
        .c1 {
            color: rgba(0, 0, 0, 0.3);
        }
        .tip {
            font-size: 12px;
        }
    </style>
    <script>
        // 验证通行证用户名
        function tipUsername() {
            document.getElementById("s1").innerHTML = "<span class='tip' style='border: 1px solid red; color:black;background:#fff2e5;padding:2px;'><img src='error.gif' alt='错误'>通行证用户名不能为空，请输入通行证用户名</span>";
        }

        function checkUsername() {
            // 由字母、数字、下划线、点、减号组成，只能以数字、字母开头或结尾，长度为4 - 18位
            let regExp = /^[a-zA-Z0-9][a-zA-Z0-9._-]{2,16}[a-zA-Z0-9]$/;
            let username = document.getElementById("username").value;
            if(regExp.test(username)){
                document.getElementById("s1").innerHTML = "<span class='tip' style='color:green'>用户名格式正确</span>";
                return true;
            } else{
                document.getElementById("s1").innerHTML = "<span class='tip' style='color:red'>您输入的用户名格式有误</span>";
                return false;
            }
        }

        // 验证登录密码
        function tipPassword() {
            document.getElementById("s2").innerHTML = "<span class='tip' style='border: 1px solid red; color:black;background:#fff2e5;padding:2px;'><img src='error.gif' alt='错误'>密码不能为空，请输入密码</span>";
        }

        function checkPassword() {
            // 长度为6 - 16位
            let regExp = /^.{6,16}$/;
            let pwd = document.getElementById("password").value;
            if(regExp.test(pwd)){
                document.getElementById("s2").innerHTML = "<span class='tip' style='color:green'>密码格式正确</span>";
                // 检查重复密码
                checkRepassword();
                return true;
            } else{
                document.getElementById("s2").innerHTML = "<span class='tip' style='color:red'>密码格式有误</span>";
                return false;
            }
        }

        // 验证重复登录密码
        function tipRepassword() {
            document.getElementById("s3").innerHTML = "<span class='tip' style='border: 1px solid red; color:black;background:#fff2e5;padding:2px;'><img src='error.gif' alt='错误'>重复密码不能为空，请重复输入密码</span>";
        }

        function checkRepassword() {
            let password = document.getElementById("password").value;
            let repassword = document.getElementById("rePassword").value;
            // 长度为6 - 16位
            let regExp = /^.{6,16}$/;

            if(!regExp.test(repassword)){
                document.getElementById("s3").innerHTML = "<span class='tip' style='color:red'>密码格式有误</span>";
                return false;
            } else if(password !== repassword){
                document.getElementById("s3").innerHTML = "<span class='tip' style='color:red'>两次输入的密码不一致</span>";
                return false;
            } else {
                document.getElementById("s3").innerHTML = "<span class='tip' style='color:green'>两次输入的密码一致</span>";
                return true;
            }
        }

        // 验证昵称
        function tipNickname() {
            document.getElementById("s4").innerHTML = "<span style='color:purple;font-size: 12px'>昵称由汉字，字母，数字以及符号组成</span>"
        }

        function checkNickname() {
            // 由汉字、字母、数字、下划线以及@、!、#、$、%、&、*特殊字符组成，长度为4 - 20个字符
            let regExp = /^[\u4e00-\u9fa5a-zA-Z0-9_@!#$%&*]{4,20}$/;
            let nickname = document.getElementById("name1").value;
            if(regExp.test(nickname)){
                document.getElementById("s4").innerHTML = "<span class='tip' style='color:green'>昵称格式正确</span>";
                return true;
            } else{
                document.getElementById("s4").innerHTML = "<span class='tip' style='color:red'>昵称格式有误</span>";
                return false;
            }
        }

        // 验证关联手机号
        function tipPhone() {
            document.getElementById("s5").innerHTML = "<span class='tip' style='border: 1px solid red; color:black;background:#fff2e5;padding:2px;'><img src='error.gif' alt='错误'>关联手机号不能为空，请输入关联手机号</span>";
        }

        function checkPhone() {
            // 由11位数字组成，以13、15、18开头
            let regExp = /^1[358]\d{9}$/;
            let phone = document.getElementById("number").value;
            if(regExp.test(phone)){
                document.getElementById("s5").innerHTML = "<span class='tip' style='color:green'>关联手机号格式正确</span>";
                return true;
            } else{
                document.getElementById("s5").innerHTML = "<span class='tip' style='color:red'>关联手机号格式有误</span>";
                return false;
            }
        }

        // 验证保密邮箱
        function tipEmail() {
            document.getElementById("s6").innerHTML = "<span class='tip' style='border: 1px solid red; color:black;background:#fff2e5;padding:2px;'><img src='error.gif' alt='错误'>保密邮箱不能为空，请输入保密邮箱</span>";
        }

        function checkEmail() {
            // 格式如web@sina.com.cn或web@tom.com
            let regExp = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            let email = document.getElementById("email").value;
            if(regExp.test(email)){
                document.getElementById("s6").innerHTML = "<span class='tip' style='color:green'>保密邮箱格式正确</span>";
                return true;
            } else{
                document.getElementById("s6").innerHTML = "<span class='tip' style='color:red'>保密邮箱格式有误</span>";
                return false;
            }
        }

        // 表单提交验证
        function checkForm() {
            let isUsernameValid = checkUsername();
            let isPasswordValid = checkPassword();
            let isRepasswordValid = checkRepassword();
            let isNicknameValid = checkNickname();
            let isPhoneValid = checkPhone();
            let isEmailValid = checkEmail();

            return isUsernameValid && isPasswordValid && isRepasswordValid && isNicknameValid && isPhoneValid && isEmailValid;
        }
    </script>
</head>
<body>
<img src="register_logo.gif" alt="注册Logo">
<div class="container">
    <form action="#" onsubmit="return checkForm()">
        <table>
            <tr><td colspan="3">&nbsp;</td></tr>
            <tr>
                <td><label for="username">通行证用户名:</label></td>
                <td>
                    <input type="text" id="username" name="nickName" onfocus="tipUsername()" onblur="checkUsername()">
                    <font size="0" class="c1">@163.com</font>
                </td>
                <td><span id="s1" class="tip"></span></td>
            </tr>
            <tr>
                <td align="right"><label for="password">登录密码:</label></td>
                <td>
                    <input type="password" id="password" name="password" size="25" onfocus="tipPassword()" onblur="checkPassword()">
                </td>
                <td><span id="s2" class="tip"></span></td>
            </tr>
            <tr>
                <td align="right"><label for="rePassword">重复登录密码:</label></td>
                <td>
                    <input type="password" id="rePassword" name="rePassword" size="25" onfocus="tipRepassword()" onblur="checkRepassword()">
                </td>
                <td><span id="s3" class="tip"></span></td>
            </tr>
            <tr><td colspan="3">&nbsp;</td></tr>
            <tr>
                <td align="right">性别:</td>
                <td>
                    <input type="radio" name="gender" value="man" checked>
                    <font class="c1">男</font>
                    <input type="radio" name="gender" value="woman">
                    <font class="c1">女</font>
                </td>
            </tr>
            <tr><td colspan="3">&nbsp;</td></tr>
            <tr>
                <td align="right"><label for="name">真实姓名:</label></td>
                <td><input type="text" id="name" name="name" size="25"></td>
            </tr>
            <tr>
                <td align="right"><label for="name1">昵称:</label></td>
                <td><input type="text" id="name1" name="nickname" size="25" onfocus="tipNickname()" onblur="checkNickname()"></td>
                <td><span id="s4" class="tip"></span></td>
            </tr>
            <tr>
                <td align="right"><label for="number">关联手机号:</label></td>
                <td><input type="tel" id="number" name="number" size="25" onfocus="tipPhone()" onblur="checkPhone()"></td>
                <td><span id="s5" class="tip"></span></td>
            </tr>
            <tr><td colspan="2">&nbsp;</td></tr>
            <tr>
                <td align="right"><label for="email">保密邮箱:</label></td>
                <td><input type="email" id="email" name="email" size="25" onfocus="tipEmail()" onblur="checkEmail()"></td>
                <td><span id="s6" class="tip"></span></td>
            </tr>
            <tr>
                <td></td>
                <td><img src="button.gif"></td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>